<template>
  <div>
    <custom-table
      :columns="tableColumns"
      :action-url="'/park/propertyfee'"
      has-search="true"
      :search-data="searchData"
      :heard-operation="heardOperation"
      :form-option-items="formOptionItems"
      :only-read-form-items="onlyReadFormItems"
    />
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable2.vue'
export default {
  components: { CustomTable },
  data() {
    return {
      visible: false,
      timer: [],
      tableColumns: [
        { label: '	账单编号', prop: 'billNumber' },
        { label: '企业名称', prop: 'enterpriseName' },
        { label: '租赁楼宇', prop: 'buildingName' },
        { label: '物业费(元/m²)', prop: 'propertyFeePrice' },
        { label: '账单金额(元)', prop: 'paymentAmount' },
        { label: '缴费时间', prop: 'createTime' },
        { label: '操作', prop: 'operate',
          operations: [
            { label: '查看', handler: { name: 'read', detailUrl: '/park/propertyfee' }},
            { label: '删除', handler: { name: 'delete', url: '/park/propertyfee', title: '是否确认删除当前账单信息?' }}
          ] }
      ],
      searchData: [
        { label: '企业名称', type: 'input', name: 'enterpriseName' },
        { label: '缴费时间', type: 'timer', name: ['start', 'end'] }
      ],
      heardOperation: [
        { name: 'add', title: '添加账单', handler: { url: '/park/propertyfee' }}
      ],
      formOptionItems: [
        { type: 'select', label: '选择租户', name: 'enterpriseId',
          handler: { label: 'name', value: 'id', url: '/park/all/enterprise' }
        },
        { type: 'select', label: '租赁楼宇', name: 'buildingId',
          handler: { label: 'name', value: 'id', url: '/park/all/building' }
        },
        { type: 'timer', label: '缴费周期', name: ['startTime', 'endTime'] },
        { type: 'text', label: '支付金额', name: 'paymentAmount', rule: { pattern: /^[0-9]+(.[0-9]{1,2})?$/, message: '请输入正确的金额，最多保留两位小数', trigger: 'blur' }},
        { type: 'select', label: '支付方式', name: 'paymentMethod',
          options: [
            { value: '1', label: '微信' }, { value: '2', label: '支付宝' }, { value: '3', label: '现金' }
          ]
        }
      ],
      onlyReadFormItems: [
        { label: '租户名称', name: 'enterpriseName' },
        { label: '租赁楼宇', name: 'buildingName' },
        { label: '缴费周期', name: ['startTime', 'endTime'], separator: '至' },
        { label: '物业费(元/m²)', name: 'propertyFeePrice' },
        { label: '账单金额(元)', name: 'paymentAmount' },
        { label: '支付方式', name: 'paymentMethodValue' },
        { label: '缴费时间', name: 'createTime' }
      ]
    }
  },
  methods: {
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  padding-right: 0px;
}
.label{
  padding-right:10px;
  line-height:32px;
  font-size:14px
}
.input{
  width: 250px !important;
  margin-right: 10px;
}
</style>

